<template>
  <div class="all-rel">
    <div class="all-flow-table-box">
      <el-table ref="myTable" :data="list" border stripe style="border-top:0">
        <el-table-column align="center" type="index" width="50"></el-table-column>
        <el-table-column sortable align="center" prop="deductionMoney" label="需要结算金额" width="150"></el-table-column>
        <el-table-column sortable align="center" prop="reminMoney" label="实际结算金额" width="150"></el-table-column>
        <el-table-column sortable align="center" prop="addTime" label="结算时间" width="180"></el-table-column>
        <el-table-column prop="note" label="备注"></el-table-column>
      </el-table>
    </div>
    <div class="all-pagination">
      <el-pagination background layout="prev, pager, next" :total="count" :page-size="size" @current-change="currentPage"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 10,
      count: 0,
      list: [],
      masterID: ''
    };
  },
  methods: {
    getList(page, size) {
      let _this = this;
      this.$ajax({
        url: 'master/getSpendList',
        data: {
          app: {
            masterID: this.masterID,
            page: page,
            size: size === undefined ? this.size : size,
          }
        },
        perfect(con) {
          _this.list = con.list;
          _this.count = con.count;
        },
        success(res) {
          if (res.data.code !== 1) {
            _this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }
      });
    },
    currentPage(page) {
      this.getList(page);
    }
  },
  created(){
    this.masterID = this.$store.state.user.userId;
    this.getList(1);
  }
};
</script>
